/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import { Form, Input, DatePicker, Select, Breadcrumb, Icon, Empty, Col } from 'antd';
import {connect} from 'dva';
import 'braft-editor/dist/index.css'
import Zmage from 'react-zmage';
import request from '@/utils/request';
import party_top from '../../images/safe_top.jpg';
import styles from './homePage.less';
import styles2 from './../ArticleManage/index.less'
import ReactDataGrid from 'react-data-grid';
import Loading from '@/components/Loading';
import party from '../../images/safe.png';
import blue_styles from './../ValveFlowMeterSIte/index.less';
import MyPagination from '@/components/MyPagination';
import ixintu from '../../images/ixintu.png';
import red_list_blue from '@/images/red_list_blue.gif';

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      all_roles: [],
      html: '',
      data: [],
      type: '',
      loading:false,
      page:1,
      per_page:30,
      meta: {total: 0, per_page: 30,current_page:1},
      readList:localStorage.getItem('readList')?JSON.parse(localStorage.getItem('readList')):[],

    };
  }
  componentDidMount() {
    const pathname=this.props.history.location.pathname
    const that=this;
    const params={
      type:pathname.split('/')[pathname.split('/').length-1],
      page:1,
      per_page:30
    }
    this.fetch(params)

  }
  fetch=(params)=>{
    console.log(this.props.history.location)
    const pathname =this.props.history.location.pathname
    const that=this
    request(`/articles`, {
      method: 'GET',
      params:{
        ...params,
        order_direction:'desc'
      }
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          data:response.data.data,
          meta:response.data.meta,
          ...params
        });
      }
    });
  }
  renderType=(value)=>{
    console.log('value',value)
    let map=[{id:21,name:'首页轮播'},{id:22,name:'安全要闻'},{id:23,name:'政策法规'},{id:24,name:'安全教育'},{id:25,name:'事故通报'},
      {id:26,name:'安全通知'}];
    for(let i=0;i<map.length;i++){
      if(Number(value)===Number(map[i].id)){
        console.log('value',map[i].name)
        return map[i].name
      }
    }
  }
  saveRead=(item)=>{
    if(this.state.readList.indexOf(item.id)<0){
      let readList = [...this.state.readList]
      readList.push(item.id)
      const that=this;
      setTimeout(function() {
        that.setState({
          readList:readList
        },function() {
          localStorage.setItem('readList',JSON.stringify(that.state.readList))
        })
      },0)


    }
  }
  render() {

    console.log('this.state.type',this.state.type)

    return (
      <div style={{width:'100%',minHeight:'100vh',background:'#0f92d6'}}>
        <div
          style={{ display:'flex',minHeight:'100vh',background:'#fff',flexDirection:'column',overflow: 'auto',
            padding:'15px',
            maxWidth: 1100, margin: '0 auto' }}>
          <div>
            <img style={{ width: '100%', height: 'auto' }} src={party_top} alt=""/>
          </div>
          <div style={{fontSize:'16px',padding:'10px 20px',color:'#333'}}>
            <span onClick={()=>{
              window.open(`http://${window.location.host}/safety_product_homepage`);
            }} className={styles.hover}>返回首页</span>
          </div>
          <div className={'table-data-content'} style={{display:'flex',minHeight:document.body.offsetHeight-590}}>
            <div style={{width:'200px',height:'auto',marginRight:'10px'}}>
              {[{id:21,name:'首页轮播'},{id:22,name:'安全要闻'},{id:23,name:'政策法规'},{id:24,name:'安全教育'},{id:25,name:'事故通报'},
                {id:26,name:'安全通知'}].map((item,index)=>{
                return  <div onClick={()=>{
                  this.setState({
                    type:item.id,

                  },function() {
                    document.title=item.name
                    this.fetch({
                      type:item.id,
                      page:1,
                      per_page:30,
                    })
                  })
                }} key={index} style={{background:'#eeeeee'}} className={Number(this.state.type)===item.id?blue_styles.item_active:blue_styles.item}>{item.name}</div>
              })}
            </div>
            <div style={{flex:'1'}}>
              <div className={styles.home_info_box} style={{marginTop:'0',height:'auto'}}>
                <div className={styles.home_info_title}  style={{borderColor:'#3c67f5'}}>
                  <div  style={{color:'#0068cd'}}><img className={styles.flag} src={party} style={{top:'-2px'}} alt=""/>{this.renderType(this.state.type)}</div>
                </div>
                <div className={styles.home_info_content} style={{height:'auto'}}>
                  {this.state.data.map((item,index)=>{
                    return <div  key={index} className={styles.home_info_item2}>
                      <div className={styles.item_img}>
                        <img src={red_list_blue} alt=""/>
                      </div>
                      <div onClick={()=>{
                        this.saveRead(item)
                        window.open(`http://${window.location.host}/safety_article/${item.id}`);
                      }} className={styles.item_content}  style={{color:this.state.readList.indexOf(item.id)>=0?'rgb(117 28 199)':''}}>{item.tag&&<span
                        style={{ color: '#0f92d6' }}>[{item.tag}] </span>} {item.title}
                      </div>
                      <div className={styles.item_data}>{item.date}</div>
                    </div>
                  })}
                </div>
                {
                  this.state.data.length===0&&
                  <div className={styles.home_info_content}>
                    <div className={styles.empty}>
                      <Empty/>
                    </div>
                  </div>
                }
              </div>
              {
                this.state.loading&&<Loading />
              }
              <div className="table-pagination"  style={{textAlign:'center',marginBottom:'16px',marginTop:'12px',paddingLeft:'12px'}}>
                <MyPagination searchCondition={{
                  type: this.state.type,
                  page:this.state.page,
                  per_page:this.state.per_page
                }} meta={this.state.meta} handleSearch={this.fetch}/>
              </div>


            </div>

          </div>
        {/*  <div style={{marginTop:'16px'}}>
            <img style={{ width: '100%', height: 'auto' }} src={party_top} alt=""/>
          </div>*/}
        </div>

      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


